<template>
  <div>
    <a href="#" class="logo" style="float: left">
      <img src="../../../image/logo.png" alt="" />
      <span>小区管理系统</span>
    </a>
    <el-dropdown
      @command="handleCommand"
      trigger="click"
      style="float: right; padding-right: 30px; color: aliceblue"
    >
      <!-- 此点击事件必须由一层嵌套否则此子元素的第一个元素存在下拉选项 -->
      <span class="el-dropdown-link">
        <i class="el-icon-s-custom"></i>
        {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" command="a"
          >修改密码</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-switch-button" command="b"
          >退出登录</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <span
      class="date-weather"
      style="float: right; color: aliceblue; margin-right: 15px"
    >
      <span class="date">{{ currentTime }}</span
      >&nbsp;&nbsp;
      <span class="weather"
        ><i :class="wea_img"></i>&nbsp;&nbsp; {{ wea }}&nbsp;&nbsp;{{
          tem_day
        }}/{{ tem_night }}C&deg;
      </span>
    </span>
    <!-- 修改密码弹窗 -->
    <el-dialog title="注册用户" :visible.sync="dialogFormVisible" width="400px">
      <el-form
        :model="userForm"
        status-icon
        ref="userForm"
        label-width="100px"
        label-position="left"
        style="width: 90%"
        :rules="rules"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input
            type="password"
            v-model="userForm.oldPass"
            placehilder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input
            type="password"
            v-model="userForm.pass"
            placehilder="请输入用户名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="userForm.checkPass"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$refs['userForm'].resetFields()">重 置</el-button>
        <el-button type="primary" @click="submitForm('userForm')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { reqWeather } from "@/api/jsonp";
import { formateDate } from "@/utils/dateUtils";
import memoryUtils from "@/utils/memoryUtils";
import storageUtils from "@/utils/storageUtils";
import userApi from "@/api/user";
// import dayjs from "@/utils/deyjs.min.js";
export default {
  data() {
    const validateOldPass = (rule, value, callback) => {
      userApi.checkPwd(this.user._id, value).then((response) => {
        const res = response.data;
        if (res.status == 0) {
          callback();
        } else {
          callback(new Error(res.msg));
        }
      });
    };
    const validatePass = (rule, value, callback) => {
      if (value != this.userForm.pass) {
        callback(new Error("两次输入不一致"));
      } else {
        callback();
      }
    };
    return {
      user: JSON.parse(localStorage.getItem("msm-user")),
      rules: {
        oldPass: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
          { validator: validateOldPass, trigger: "blur" },
        ],
        pass: [{ required: true, message: "新密码不能为空", trigger: "blur" }],
        checkPass: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { validator: validatePass, trigger: "change" },
        ],
      },
      userForm: {
        oldPass: "",
        pass: "",
        checkPass: "",
      },

      dialogFormVisible: false,
      user: memoryUtils.user,
      currentTime: formateDate(Date.now()),
      tem_day: "",
      tem_night: "",
      wea: "",
      wea_img: "",
    };
  },
  mounted() {
    this.getTime();
    this.getWeather();
  },
  components: {},
  methods: {
    // 获取天气
    getWeather() {
      reqWeather("哈尔滨").then((res) => {
        // console.log(res);
        const weaImgs = {
          xue: "el-icon-lightning",
          lei: "el-icon-lightning",
          shachen: "el-icon-lightning",
          wu: "el-icon-lightning",
          bingbao: "el-icon-lightning",
          yun: "el-icon-lightning",
          yu: "el-icon-lightning",
          yin: "el-icon-lightning",
          qing: "el-icon-lightning",
        };
        this.tem_day = res.tem_day;
        this.tem_night = res.tem_night;
        this.wea = res.wea;
        this.wea_img = weaImgs[res.wea_img];
      });
    },
    // 获取时间
    getTime() {
      setInterval(() => {
        this.currentTime = formateDate(Date.now());
      }, 1000);
    },
    // 点击下拉菜单退出或修改密码
    handleCommand(command) {
      // console.log(command);
      switch (command) {
        case "a":
          // console.log(this.user);
          this.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs["userForm"].resetFields();
          });
          break;
        case "b":
          memoryUtils.user = {};
          storageUtils.removeUser();
          sessionStorage.removeItem("USE_KEY")
          this.$router.replace("/login");
          break;
        default:
          break;
      }
    },
    // handlePwd() {},
    // 清空本地存储和共享数据
    handleLogout() {
      memoryUtils.user = {};
      storageUtils.removeUser();
      this.$router.replace("/login");
    },
    //  表单提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userApi
            .updatePwd(this.user._id, this.userForm.checkPass)
            .then((response) => {
              const res = response.data;
              console.log(res);
              this.$message({
                message: res.msg,
                type: res.status == 0 ? "success" : "warning",
              });
              if (res.status == 0) {
                this.handleLogout();
                this.dialogFormVisible = false;
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.logo {
  text-decoration: none;
  color: aliceblue;
  display: block;
  height: 50px;
  padding: 0 0 0 10px;
}
.logo img {
  height: 50px;
  width: 50px;
  vertical-align: middle;
}
</style>